<!--
 * @Author: your name
 * @Date: 2022-01-04 08:16:19
 * @LastEditTime: 2022-01-07 13:46:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\views\blog\components\blogCategory.vue
-->
<template>
  <div class="blogCategory-container" v-loading="isLoading">
      <h3 v-if="this.data.length !== 0">文章分类</h3>
      <RightList :data="disposeAllBlogTypeData" @select="disposeSelect"/>
  </div>
</template>

<script>
import {getAllBlogType} from "@/api/blog.js"
import fetchData from "@/mixins/fetchData.js"
import RightList from "./rightList.vue"
export default {
  mixins:[fetchData([])],
  methods:{
    async fetchData(){
      return await getAllBlogType()
    },
    disposeSelect(newCategory){
      if(newCategory.id === this.getRouteInfo.categoryId){
        return;
      }
      if(newCategory.id === -1){
        this.$router.push({
          name:"Blog",
          query:{
            page:1,
            limit:this.getRouteInfo.limit,
          }
        })
      }else{
        this.$router.push({
          name:"CategoryBlog",
          query:{
            page:1,
            limit:this.getRouteInfo.limit,
          },
          params:{
            categoryId:newCategory.id
          }
        })
      }
    }
  },
  created(){
    this.getRouteInfo
  },
  components:{
    RightList,
  },
  computed:{
    // 处理所有分类博客数据
    disposeAllBlogTypeData(){
      if(this.data.length === 0){
        return [];
      }
      const newArr = [];
      // 所有文章数量
      let totalBlogTypeNum = 0;
      const startObj = {}
      for(let i = 0; i<this.data.length; i++){
        // 统计所有文章数量
        totalBlogTypeNum += this.data[i].articleCount;
        
        this.data[i].active = this.getRouteInfo.categoryId === this.data[i].id

        // 创建新数组
        newArr.push(this.data[i])
      }
      // 增加全部一项
      startObj.name = "全部";
      startObj.articleCount = totalBlogTypeNum
      startObj.active = this.getRouteInfo.categoryId === -1
      startObj.id = -1
      newArr.unshift(startObj)
      return newArr;
    },
    // 获取路由信息
    getRouteInfo(){
      const categoryId = +this.$route.params.categoryId || -1;
      const page = +this.$route.query.page || 1;
      const limit = +this.$route.query.limit || 10;
      return {
        categoryId,
        page,
        limit,
      };
    }
  }
}
</script>

<style scoped lang="less">
.blogCategory-container{
  position:relative;
  overflow:hidden;
  width:200px;
  height:calc(100vh - 40px);
  padding:20px;
  h3{
    margin-bottom:20px;
    letter-spacing:0.1em;
  }
}
</style>